<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>分组管理</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
    <style>
        .viewCell {

        }

        .editCell {

        }
    </style>
    <script type="text/javascript">

        $(function () {
            reloadData();
            // treeTable 生成

            //删除 click
            $(".deleteBtn").live("click", function () {
                var _id = $(this).data("id");
                confirmx("确认要删除该分组吗？", function () {
                    $.post("${ctx}/mywork/potentialCustomer/potentialGroup/delete",
                            {id: _id}, function (data) {
                                if (data.state == true) {
                                    alertx(data.message, function () {
                                        window.location.reload();
                                        //reloadData();
                                    });
                                } else {
                                    alertx(data.message, null, null, null, "error");
                                }
                            });
                });
            });

            // 添加按钮
            $("#btnSubmit").live("click", function () {
                var _this = this;
                $.post("${ctx}/mywork/potentialCustomer/potentialGroup/save", $("#searchForm").serialize(),
                      function (data) {
                          if (data.state == true) {
                              $("#searchForm").find("input").not(".btn").val("");
                              alertx(data.message, function () {
                                  window.location.reload();
//                                  reloadData();
//                                  $("#searchForm")[0].reset();
                              });
                          } else {
                              alertx(data.message, null, null, null, "error");
                          }
                      });
            });
        });
        // 重新加载data
        function reloadData() {
            $("#treeTableList").empty();

            $.get("${ctx}/mywork/potentialCustomer/potentialGroup/list", function (data) {
                _buildTreeTable(data);
            });
        }

        function _buildTreeTable(data) {
            var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");

            var ids = [], rootIds = [];
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            ids = ',' + ids.join(',') + ',';
            for (var i = 0; i < data.length; i++) {
                if (data[i].levelNum == 0) {
                    data[i].parent = true;
                } else {
                    data[i].parent = false;
                }
                if (ids.indexOf(',' + data[i].parentId + ',') == -1) {
                    if ((',' + rootIds.join(',') + ',').indexOf(',' + data[i].parentId + ',') == -1) {
                        rootIds.push(data[i].parentId);
                    }
                }
            }
            for (var i = 0; i < rootIds.length; i++) {
                _addRow("#treeTableList", tpl, data, rootIds[i], true);
            }
            $("#treeTable").treeTable({expandLevel: 2, initialState: "expanded"});

        }

        function _addRow(list, tpl, data, pid, root) {
            for (var i = 0; i < data.length; i++) {
                var row = data[i];
                if ((${fns:jsGetVal('row.parentId')}) == pid) {
                    $(list).append(Mustache.render(tpl, {
                        dict: {
                            blank123: 0
                        }, pid: (root ? 0 : pid), row: row
                    }));
                    _addRow(list, tpl, data, row.id);
                }
            }
        }

        //显示或隐藏编辑区域
        function editArea(_this) {
            $(_this).parents("tr").find(".viewCell").toggle();
            $(_this).parents("tr").find(".editCell").toggle();
        }

        var update = function (_this) {
            var inputTag = $(_this).parents("tr").find("input[type='text']");
            var _id = $(inputTag).data("id");
            var _name = $(inputTag).val();
            if ($(inputTag).val() == "") {
                alertx("分组名称不能为空", null, null, null, "error");
                return;
            } else {
                $.post("${ctx}/mywork/potentialCustomer/potentialGroup/update",
                        {
                            id: _id,
                            name: _name,
                            "parent.name": ""
                        }, function (data) {
                            if (data.state == true) {
                                alertx(data.message);
                            } else {
                                alertx(data.message, null, null, null, "error");
                            }
                            window.location.reload();
                            //reloadData();
                        });
            }
        }

        function selectGroup(){
            return $(".checkboxselectone[checked='checked']").val();
        }
    </script>
</head>
<body>
<%--添加div start--%>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion2">
                <i class="icon-plus"></i>
                添加分组
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <form:form id="searchForm" modelAttribute="potentialGroup"
                       action="" onsubmit="return false"
                       method="post" class="breadcrumb form-search">
                <ul class="ul-form">
                    <li>
                        <label>上级分组：</label>
                        <sys:treeselect id="parent" name="parent.id" value="${potentialGroup.parent.id}"
                                        labelName="parent.name" labelValue="${potentialGroup.parent.name}"
                                        title="父级分组" url="/mywork/potentialCustomer/potentialGroup/treeData"
                                        extId="${potentialGroup.id}" cssClass="input-medium" allowClear="true"/>
                    </li>
                    <li>
                        <label>分组名称：</label>
                        <input id="name" name="name" type="text" htmlEscape="false" maxlength="50"
                               onblur="this.value=$.trim(this.value)"
                               class="input-medium required"/>
                    </li>
                    <li class="btns">
                        <input id="btnSubmit" class="btn btn-primary" type="submit" value="添加"/>
                    </li>
                    <li class="clearfix"></li>
                </ul>
            </form:form>
            <div style="padding-left:35px; padding-bottom:10px; color: #6495ED;">
                <span>提示：如果不选择上级分组，则添加的分组为顶级分组</span>
            </div>
        </div>
    </div>
</div>
<%--添加div end--%>
<script type="text/javascript">top.$.jBox.closeTip();</script>
<div id="messageBox" class="alert hide">
    <button class="close">×</button>
    <span class="content"></span>
</div>

<table id="treeTable" class="table table-striped table-bordered table-condensed table-hover checkboxcontainer">
    <thead>
    <tr>
        <th>分组名称</th>
        <shiro:hasPermission name="mywork:potentialCustomer:potentialGroup:edit">
            <th>操作</th>
        </shiro:hasPermission>
    </tr>
    </thead>
    <tbody id="treeTableList"></tbody>
</table>
<script type="text/template" id="treeTableTpl">
    <tr id="{{row.id}}" pId="{{pid}}">
        <td>
            <span class="viewCell">
                <input name="selectId" class="checkboxselectone" data-parent="{{row.parent}}" value="{{row.id}}"
                       type="checkbox"/>
                <span>{{row.name}}</span>
            </span>
            <span class="editCell" style="display:none;">
                <input type="text" value="{{row.name}}" data-id="{{row.id}}"
                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" style="margin-bottom:0px;"/>

 				<a href="javascript:void(0)" class="btn btn-small" onclick="update(this);">确定</a>
 				<a href="javascript:void(0)" class="btn btn-small" onclick="editArea(this);">取消</a>

			</span>
        </td>
        <shiro:hasPermission name="mywork:potentialCustomer:potentialGroup:edit">
            <td>
                {{#row.levelNum}}
                <a href="javascript:void(0)" onclick="editArea(this);">修改</a>
                <a href="javascript:void(0)" data-id="{{row.id}}" class="deleteBtn">删除</a>
                {{/row.levelNum}}
            </td>
        </shiro:hasPermission>
    </tr>
</script>
</body>
</html>